<template>
  <div>
    <div class="select-tree" v-show="showTree">
      <div style="padding: 0 10px;margin-bottom: 10px">
        <el-input
          v-model="filterText"
          placeholder="搜索站点"
          size="mini"
        />
        <i class="el-icon-s-fold icod" @click="visshow"></i>
      </div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div style="padding-bottom: 10px">
          <el-tree
            ref="tree"
            :expand-on-click-node="false"
            node-key="C007_SUBSTATION_ID"
            :data="siteList"
            :props="defaultProps"
            :default-expand-all="true"
            :default-checked-keys="checkedKeys"
            :filter-node-method="filterNode"
            highlight-current
            show-checkbox
          />
        </div>
      </el-scrollbar>
    </div>
    <div v-show="!showTree" class="noshow">
      <i class="el-icon-s-unfold icod" @click="noshow"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MultipleSiteTree',
  props: {
    showLeaf: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      checkedKeys: [],
      filterText: '',
      siteList: [{
        C007_SUBSTATION_ID: 370400,
        STCODE: 370400,
        SUBNAME: '山东省',
        STNAME: '山东省',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'SUBNAME'
      },
      showTree: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getSiteList()
  },
  methods: {
    getSiteList() {
      this.$http.get('/position/findListDetail', { type: 1 }).then(response => {
        let data = response.data
        const index = data.findIndex(item => item.STCODE === 370402)
        const indexArr = data.splice(index, 1)
        data = [...indexArr, ...data]
        const handleTree = this.handleTreeByType(data, 'STCODE', 'STNAME', 'C007_SUBSTATION_ID', 'SUBNAME')
        if (!this.showLeaf) {
          this.siteList[0].children = handleTree.map(value => {
            value.children = undefined
            return value
          })
        } else {
          this.siteList[0].children = handleTree
        }
        this.$nextTick(() => {
          if (this.showLeaf === true) {
            this.$refs.tree.setCheckedNodes(this.siteList[0].children[0].children)
          } else {
            this.$refs.tree.setCheckedNodes(this.siteList)
          }
          this.$nextTick(() => {
            this.$parent.getList()
          })
        })
      })
    },
    filterNode(value, data, node) {
      if (!value) {
        // node.expanded = false
        return true
      }
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    getCheckedKeys() {
      return this.$refs.tree.getCheckedKeys()
    },
    getSubIds() {
      return this.$refs.tree.getCheckedKeys(true)
    },
    visshow() {
      this.showTree = false
      this.$emit('furn')
    },
    noshow() {
      this.showTree = true
      this.$emit('furn')
    }
  }
}
</script>

<style scoped>
.select-tree {
  position: fixed;
  width: 200px;
  background: #fff;
  height: 100%;
  padding-top: 10px;
}

.el-scrollbar {
  height: calc(100% - 70px);
}

.icod {
  display: block;
  font-size: 25px;
  text-align: right;
  margin-bottom: -12px;
  color: #2375DB;
}

.noshow {
  /* background: cornflowerblue; */
  width: 30px;
}
</style>
